<template>
  <div class="OrderForm-centent1">
    <div class="OrderForm-cnetext-top" @click="fun1()">
      <span class="iconfont icon-zuojiantou"></span>
      <div class="OrderForm-cnetext-top-right">确认订单</div>
    </div>
    <div class="OrderForm-centent-site" @click="fun2()">
      请填写收货地址<span class="iconfont icon-youjiantou"></span>
    </div>
    <div class="OrderForm-centent-centent">
      <span class="iconfont icon-dewu" style="font-size: .14rem;"><span class="fahuo"> 闪电发货 | 预计02月29日送达</span></span>
      <div class="OrderForm-centent-centent1">
        <span>
          <img v-lazy="OrderForm.imgs" alt="" />
        </span>
        <span>
          <nav>{{ OrderForm.classify }}</nav>
          <nav>
            <span>{{ OrderForm.size }}</span> 数量 x1
          </nav>
          <nav>
            <p>假一赔三</p>
            <p>防伪包装</p>
            <p>7天无理由退换</p>
          </nav>
        </span>
        <span>
          {{ OrderForm.price }}
        </span>
      </div>
      <div class="OrderForm-centent-centent2">
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
      </div>
      <div class="OrderForm-centent-centent3">
        <p>
          共1件 小计：<span style="font-weight: bold">{{
            OrderForm.price
          }}</span>
        </p>
      </div>
    </div>
    <div class="OrderForm-centent-footer">
      <img src="img/lun04.jpg" alt="" />
    </div>
    <div class="OrderForm-footer">
      <span
        >共1件 | 合计：<span class="OrderForm-hj">{{
          OrderForm.price
        }}</span></span
      >

      <el-button type="text" @click="open" style="width: 2rem"
        >提交订单</el-button
      >
    </div>
    <div></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { CouponCell, CouponList } from "vant";
Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(Popup);
export default {
  methods: {
    fun2() {
      this.$router.push("/site");
    },
    fun1() {
      this.$router.go(-1);
    },
    open() {
      this.$confirm("免密码支付, 是否支付?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "支付成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消支付",
          });
        });
    },
  },
  data() {
    return {
      show: false,
      OrderForm: [],
    };
  },
  created() {
    this.OrderForm = JSON.parse(this.$route.query.OrderForm);
  },
};
</script>

<style>
.fahuo{
    font-size: .14rem;
}
.OrderForm-hj {
  color: rgb(250, 44, 44);
  font-weight: bold;
  font-size: 0.168rem;
}

.OrderForm-footer {
  width: 100%;
  margin: auto;
  height: 0.5rem;
  position: fixed;
  bottom: 0.1rem;
  display: flex;
  justify-content: space-around;
  line-height: 0.5rem;
  border-top: 0.01rem solid rgb(197, 196, 196);
  padding-top: 0.2rem;
  background: white;
}
.el-button--text {
  color: white;
  background: turquoise;
  text-align: center;
}
.OrderForm-centent-centent2 {
  border-top: rgb(189, 187, 185) 0.01rem solid;
  padding-top: 0.1rem;
}
.OrderForm-centent-footer {
  width: 100%;
}
.OrderForm-centent-footer img {
  width: 100%;
}
.OrderForm-centent-centent3 p {
  height: 1rem;
  width: 100%;
  text-align: right;
  margin-top: 0.2rem;
  border-top: rgb(189, 187, 185) 0.01rem solid;
  padding-top: 0.3rem;
}
.OrderForm-centent-centent {
  width: 90%;
  margin: auto;
  margin-top: 0.3rem;
}
.OrderForm-centent-centent1 {
  width: 100%;
  min-height: 1rem;
  display: flex;
  margin-top: 0.2rem;
}
.OrderForm-centent-centent span:nth-child(1) {
  height: 0.8rem;
  width: 0.8rem;
}
.OrderForm-centent-centent1 span:nth-child(1) img {
  width: 100%;
  height: 100%;
}
.OrderForm-centent-centent1 span:nth-child(2) {
  width: 60%;
  height: 100%;
  padding-right: 0.1rem;
  padding-left: 0.1rem;
}
.OrderForm-centent-centent1 span:nth-child(2) nav:nth-child(1) {
  font-size: 0.12rem;
  line-height: 0.2rem;
}
.el-message-box {
  width: 3rem;
}
.OrderForm-centent-centent1 span:nth-child(2) nav:nth-child(2) {
  color: rgb(202, 198, 198);
  line-height: 0.3rem;
  font-size: 0.1rem;
}
.OrderForm-centent-centent1 span:nth-child(2) nav:nth-child(3) {
  color: rgb(209, 24, 24);
  font-size: 0.08rem;
  width: 100%;
  line-height: 0.2rem;
  display: flex;
  flex-wrap: wrap;
}
.OrderForm-centent-centent1 span:nth-child(2) nav:nth-child(3) p {
  width: auto;
  height: 0.2rem;
  background: rgba(241, 160, 160, 0.733);
  margin-right: 0.05rem;
}
.OrderForm-centent-centent1 span:nth-child(3) {
  height: 100%;
  font-size: 0.16rem;
  font-weight: bold;
}
.OrderForm-centent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.OrderForm-cnetext-top {
  width: 90%;
  height: 0.6rem;
  display: flex;
  font-size: 0.2rem;
  line-height: 0.3rem;
  margin: auto;
  margin-top: 0.1rem;
  background: white;
}
.OrderForm-cnetext-top-right {
  flex: 1;
  text-align: center;
}
.OrderForm-centent-site {
  width: 90%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.18rem;
  line-height: 0.3rem;
  margin: auto;
  margin-top: 0.1rem;
  background: white;
  text-align: center;
  border-bottom: tomato 0.02rem solid;
}
.icon-youjiantou {
  color: rgb(214, 211, 211);
}
</style>